<template>
  <div class="left" v-adaptive="{ bottomOffset: 0 }">
    <div class="tabs">
      <div v-for="(item,key) in typeList" @click="handleClick(key)" :key="item">
     <el-tooltip effect="dark" :content="item" placement="right">
          <img :src="getAssetsImages(key)" class="box-item" />
        </el-tooltip>
      </div>
    </div>
    <div class="left_right">
      <div :key="index" v-for="(item, index) in editorTypeList[activeName]" class="item" @dragend="(e) => onDragEnd()" @dragstart="(e) => dragStart({ item })" draggable="true">
        <component  :is="item.leftOpt.preview"></component>
        <div class="leftLabel">{{ item.leftOpt.label }}</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { typeList } from "@/views/coderCreate/index";
import {utilComputed} from "@/assets/utils/index"
let getAssetsImages=utilComputed((name: string)=>{
  return new URL(`./img/${name}.png`, import.meta.url).href; //本地文件路径
})
const activeName = ref<componetType>("formItem");
const handleClick = (values: componetType) => {
  activeName.value = values;
};
const dragStore = useDrag();
function dragStart({ item }: { item: IStdOListDrag }) {
  dragStore.dragStyle = "pointer-events: none;";
  dragStore.clickReset();
  dragStore.dragCurrent = item;
}
function onDragEnd() {
  dragStore.dragReset();
}
const editorTypeList = ref<{ [key in componetType]: IStdOListDrag[] }>({"formItem":[] , "tableItem":[] , "container":[]});
function handleEditor() {
  dragStore.registerConfig.componentList.map((item) => {
    editorTypeList.value[item.type].push(item as IStdOListDrag);
  });
}
handleEditor();
</script>
<style lang="scss" scoped>
.left {
  display: flex;
  font-size: 12px;
  .left_right {
    width: 250px;
    overflow-y: auto;
    padding: 10px;
  }
  .tabs {
    border-right: 1px solid rgb(223, 207, 207);
    padding: 15px 10px 0;
    .box-item {
      height: 23px;
      width: 23px;
      margin-bottom: 10px;
    }
  }
  .item {
    border: 1px solid rgb(223, 207, 207);
    margin-bottom: 5px;
    padding: 25px 5px 5px 5px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    .leftLabel {
      position: absolute;
      top: 0;
      left: 0;
      background: rgb(218, 197, 197);
      padding: 2px 4px;
      border-radius: 0px 5px 5px 5px;
      font-size: 12px;
    }
  }
}
</style>
